import { Card, Carousel } from "antd"
import style from "./index.module.css"
export const Recommend = () => {
  return (
    <Card title="推荐内容">
      <Carousel autoplay>
        <div className={style.item}>
          <a
            href="https://segmentfault.com/a/1190000042666738?utm_source=sf-homepage-headline"
            style={{
              backgroundImage:
                "url(https://segmentfault.com/img/bVc3aJ9?spec=cover)",
            }}
          ></a>
        </div>
        <div className={style.item}>
          <a
            href="https://segmentfault.com/a/1190000042203704?utm_source=sf-homepage-headline"
            style={{
              backgroundImage:
                "url(https://segmentfault.com/img/bVc1fjB?spec=cover)",
            }}
          ></a>
        </div>
      </Carousel>
      {/* 推荐的文章列表 */}
      <a href="https://segmentfault.com/a/1190000042661646" className={style.aItem}>
        <div className={style.index}>1</div>
        <div className={style.coment}>
          利用思否猫素材实现一个丝滑的轮播图（html + css + js）
        </div>
      </a>
      <a href="https://segmentfault.com/a/1190000042661646" className={style.aItem}>
        <div className={style.index}>2</div>
        <div className={style.coment}>
          利用思否猫素材实现一个丝滑的轮播图（html + css + js）
        </div>
      </a>
      <a href="https://segmentfault.com/a/1190000042661646" className={style.aItem}>
        <div className={style.index}>3</div>
        <div className={style.coment}>
          利用思否猫素材实现一个丝滑的轮播图（html + css + js）
        </div>
      </a>
      <a href="https://segmentfault.com/a/1190000042661646" className={style.aItem}>
        <div className={style.index}>4</div>
        <div className={style.coment}>
          利用思否猫素材实现一个丝滑的轮播图（html + css + js）
        </div>
      </a>
    </Card>
  )
}
